<template>
    <div class="video-wrap">
      <el-button
        class="head-btn"
        type="primary"
        @click.stop="back"
        >返回</el-button
      >
      <div class="top">
        <span>设备序列号：{{ selectDevice }}</span>
        <span class="text"
          >通道{{ selectChannel }} - {{ currentChannelName }}</span
        >
      </div>
      <div class="left" style="position: relative">
        <iframe
          :src="frameSrc"
          width="100%"
          height="100%"
          frameborder="0"
          allowfullscreen="true"
          webkitallowfullscreen="true"
          mozallowfullscreen="true"
          oallowfullscreen="true"
          msallowfullscreen="true"
        />
        <div class="left-text">{{ stationName }}</div>
      </div>
      <el-scrollbar class="right" scroll-y>
        <el-menu default-active="1-1">
          <div v-for="(item, index) in menuData" :key="index">
            <el-sub-menu :index="String(index + 1)">
              <template slot="title">
                <span>设备序列号：{{ item.deviceSerial }}</span>
              </template>
              <div
                v-for="(subitem, subInx) in item.ezvizeDevices"
                :key="subInx"
              >
                <el-menu-item
                  :index="`${index + 1}-${subInx + 1}`"
                  @click="
                    clickItem(
                      subitem.deviceSerial,
                      subitem.channelNo,
                      subitem.channelName
                    )
                  "
                >
                  通道{{ subitem.channelNo }} -
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="subitem.channelName"
                    placement="top-end"
                  >
                    <span class="channel-name-text">{{
                      subitem.channelName
                    }}</span>
                  </el-tooltip>
                </el-menu-item>
              </div>
            </el-sub-menu>
          </div>
        </el-menu>
      </el-scrollbar>
    </div>
    <!-- <div class="right-box" /> -->
</template>

<script lang="ts" setup>
import {
  queryMonitorDevices,
  queryPlayerAddress,
} from '@/service/apis/monitor';

const route = useRoute();
const {
  query: { stationId, stationName },
} = route;
const router = useRouter();

const frameSrc = ref('');
const menuData = ref([] as any[]);
const selectDevice = ref('');
const selectChannel = ref('');
const currentChannelName = ref('');

const back = () => {
  router.back();
};

const getData = () => {
  queryMonitorDevices(stationId).then((res: any) => {
    if (res) {
      menuData.value = res || [];
      clickItem(
        menuData.value[0]?.deviceSerial,
        menuData.value[0]?.ezvizeDevices[0]?.channelNo,
        menuData.value[0]?.ezvizeDevices[0]?.channelName
      );
    }
  });
};

const clickItem = (
  deviceSerial: string,
  channelNo: string,
  channelName: string
) => {
  // console.log('clickItem', deviceSerial, channelNo, channelName)
  selectDevice.value = deviceSerial;
  selectChannel.value = channelNo;
  currentChannelName.value = channelName;

  const form = {
    stationId,
    channelNo,
    deviceSerial,
  };
  queryPlayerAddress(form).then((res: any) => {
    if (res?.token && res?.url) {
      frameSrc.value = `https://open.ys7.com/console/jssdk/pc.html?accessToken=${res.token}&url=${res.url}&themeId=pcLive`;
    } else {
      frameSrc.value = '';
    }
  });
};

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.video-wrap {
  box-sizing: border-box;
  // margin: 20px 0;
  display: flex;
  width: 100%;
  min-height: 700px;
  // height: calc(100vh - 40px);
  padding: 60px 20px 20px;
  overflow: hidden;
  background-color: #eee;
  border-radius: 12px;
  position: relative;

  .top {
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 20px;
    height: 40px;

    .text {
      margin-left: 20px;
    }
  }
  .head-btn {
    position: absolute;
    right: 20px;
    top: 16px;
  }
  .left {
    // height: 100%;
    width: calc(100% - 340px);
    // height: 100%;
    border: 1px solid;
    box-sizing: border-box;
    background-color: #000;
    &-text {
      color: #fff;
      font-size: 18px;
      position: absolute;
      right: 40px;
      bottom: 50px;
    }
  }

  .right {
    width: 320px;
    height: 100%;
    background: #fff;
    margin-left: 20px;
    overflow: hidden;

    ::-webkit-scrollbar {
      width: 0;
    }

    .channel-name-text {
      width: 160px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // .right-box {
  //   position: absolute;
  //   right: 40px;
  //   bottom: 42px;
  //   height: 10px;
  //   width: 220px;
  //   background: #fff;
  // }
}
</style>
